
<template>
  <div class="login-content" style="background-color:#ffffff">


    <h3 style="font-weight: normal;">登录</h3>
    <van-cell-group>
      <van-field
        type="number"
        style="border:0;"
        v-model="phone"
        label="手机号"
        placeholder="请输入手机号"
        maxlength="11"
        error-message=""/>
      <van-field
        type="number"
        v-model="sms"
        center
        clearable
        class="xanzhengs"
        label="验证码"
        placeholder="请输入短信验证码"
        maxlength="4"
      >
        <van-button slot="button" size="small" type="primary" @click="getyzcode"
                    :disabled="attcode"
                    v-if="showbtn"
                    style="background: #4C9FFD;border:1px solid #4C9FFD;border-radius: 14px;"
        >发送验证码</van-button>

        <van-button slot="button" size="small" type="primary"
                    :disabled="attcode"
                    v-if="!showbtn"
                    style="background: #4C9FFD;border:1px solid #4C9FFD;border-radius: 14px;"
        >{{code_ts}}</van-button>

      </van-field>


      <van-checkbox v-model="checked" class="agreement">注册/登录即表示您已同意 <span class="agreement_title" @click="to_h5_detail">{{ua_text}}</span></van-checkbox>


      <van-button
        type="primary" size="large"
        :disabled="codecontent" @click="login"
        style="margin-top: 5vh;background: #4C9FFD;border:1px solid #4C9FFD">登录</van-button>
    </van-cell-group>
    <p class="login_p">
      登录即代表注册
    </p>
    <!--<p class="login">
      登录即代表同意用户协议
    </p>-->
  </div>
</template>
<script>
    export default{
        data () {
            return {
                codecontent:false,
                phone:'',//手机号
                sms:'',
                confirm: true,  //提交验证按钮判断
                attcode: false,  //点击获取验证码按钮判断
                showbtn: true, // 展示获取验证码或倒计时按钮判断
                yzcode: '',
                code_ts: '获取验证码', //倒计时提示文字
                sec: 60, // 倒计时秒数
                checked: false,
                uaId:'',
                ua_text:''
            }
        },
        mounted:function(){
            this.phone = localStorage.getItem('phone');
            this.sms = localStorage.getItem('sms');
            this.get_agreement();
        },
        /*watch:{
            phone:function(value){
                localStorage.setItem('phone', value);

            },
            sms:function(value){
                localStorage.setItem('sms', value);
            },
        },*/
        methods:{
            get_agreement(){
                let that = this;
                that.$sendRequest('/sys/agreement_detail_homepage',"").then(function(res){
                    console.log(res.data)
                    if(res.data.code==0){
                        that.uaId=res.data.result.ua.uaId;
                        that.ua_text=res.data.result.ua.title;
                    }
                })
            },
            to_h5_detail(){
                let that = this;
                localStorage.setItem('phone', that.phone);
                localStorage.setItem('sms', that.sms);
                that.$router.push({
                    path: '/h5',query:{
                        url:"/sys/agreement_detail?uaId="+that.uaId
                    }
                })
            },
            //
            getyzcode () {
                let mobile = this.phone;
                if(mobile == ''){
                    this.$toast("请输入手机号");
                    return false;
                }
                if(mobile.length != 11){
                    this.$toast("手机号为11位有效数字");
                    return false;
                }
                this.showbtn = false;
                this.sendcode();
                var timer = setInterval(() => {
                    this.code_ts = this.sec + 'S后重试'
                    this.sec = this.sec-1
                    this.showbtn = false;
                    if (this.sec === 0) {

                        clearInterval(timer)
                        this.sec = 60
                        this.code_ts = this.sec + 'S后重试'
                        this.showbtn = true;
                        this.attcode = false;

                    }
                }, 1000)
            },
            sendcode(){
                this.attcode = true;
                let params = "mobile="+this.phone;
                this.$sendRequest('/login/getVerificationCode',params).then(function(res){
                    console.log(res.data)
                    if(res.data.code ==0){

                    }else if(res.data.code ==2){
                        this.$toast(res.data.msg);
                    }
                })
            },
            //登录操作
            login(){
                const that = this;
                let mobile = this.phone;
                let sms = this.sms;
                let checked = this.checked;

                if(!checked){
                    this.$toast("请勾选协议");
                    return false;
                }
                if(mobile == ''){
                    this.$toast("请输入手机号");
                    return false;
                }
                if(mobile.length != 11){
                    this.$toast("手机号为11位有效数字");
                    return false;
                }
                if(sms == ''){
                    this.$toast("请输入验证码");
                    return false;
                }
                if(sms.length != 4){
                    this.$toast("验证码为4位有效数字");
                    return false;
                }
                console.log(mobile);
                console.log(sms);
                localStorage.setItem('phone', '');
                localStorage.setItem('sms', '');
                let params = "mobile="+this.phone+"&verificationCode="+sms;

                this.$sendRequest('/login/toLogin',params).then(function(res){
                    console.log(res.data)
                    if(res.data.code ==0){
                        let user = res.data.result.user;
                        //把user以json的形式存储在本地
                        localStorage.setItem('user', JSON.stringify(user));
                        if(user.isDoneInfo == 0) {
                            that.$router.push({
                                path: '/choosecapital'
                            })
                        }else if(user.isDoneInfo == 1){
                            that.$router.push({
                                path: '/banner'
                            })
                        }
                    }else if(res.data.code ==2){
                        that.$toast(res.data.msg);
                    }
                })

            }

        }
    }
</script>

<style scoped="scoped">
  .login-content{
    padding: 12px;
  }
  .login_p{
    color: #666666;
    font-size: 14px;
    text-align: left;
  }
  .login{
    left: 27%;
    position: absolute;
    bottom: 0;
  }
  .agreement{
    margin-top:20px;
    margin-left:20px;
    font-size:14px;
  }
  .agreement_title{
    text-decoration: underline;
    color:#4C9FFD;
  }
  [class*=van-hairline]::after{
      border: 0 solid #ffffff;
  }
  .xanzhengs::after {
      border-bottom: 1px solid #ffffff;
  }
</style>


